<template>
  <div class="deviceWorking">
设备运维页面
      <div>
        <video id="videoFlv" ref="videoFlv" style="width: 500px;height: 500px;" controls></video>
        </div>

        <div class="echarts" ref="myChart" style="width: 30%;height: 300px; background-color:blueviolet;"></div>
        <div class="mapCanvas" ref="echartsMap1" style="background-color: aquamarine;width: 30%;height: 300px;" ></div>
  </div>
</template>

<script setup>
import flvjs from 'flv.js';
import UseEchartsResize from "@/hooks/useEchartsResize"
import { ref, reactive,onMounted,onBeforeUnmount, onUnmounted,getCurrentInstance} from 'vue'
// 获取全局配置项
const { proxy } = getCurrentInstance();
const { $echarts, $axios } = proxy;
const myChart = ref("");
// const {proxy} =getCurrentInstance()
// 1 要有一个echarts的容器 （定义宽高）

// 2. 初始化echartsd的实例对象（因为要传入容器，所有最好在onMounted里面因为挂在完成了dom)

// 3定义options选项（echarts网站找）

// 4请求数据。把数据放到options的对应位置 如果请求的数据格式/结构和这个echarts的options要求的数据长得不一样。就要变成和要求的一样

// 5用第二部的echarts实例调用setOptions方法。让echarts它改变

// 6适配页面的大小  echarts实例有一个方法是resize()

// 7 离开的时候.销毁这个echarts实例

// V2  const myChart = this.$refs.myChart
// const leftBottomEchartInstance = ref();
const option = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['广州西门子变压器公司', '耐恒（广州）纸品有限公司', '广州斗原钢铁有限公司', '广州璨宇光学有限公司', '佐登妮丝（广州）有限公司']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2021-12-20 00:00:00', '2021-12-20 06:00:00', '2021-12-20 12:00:00', '2021-12-20 18:00:00', '2021-12-21 00:00:00', '2021-12-21 06:00:00', '2021-12-21 12:00:00', '2021-12-21 18:00:00', '2021-12-22 00:00:00']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '广州西门子变压器公司',
            type: 'line',
            // stack: 'Total',
            data:[] ,
            smooth: true,
          },
          {
            name: '耐恒（广州）纸品有限公司',
            type: 'line',
            // stack: 'Total',
            data: [],
            smooth: true,
          },
          {
            name: '广州斗原钢铁有限公司',
            type: 'line',
            // stack: 'Total',
            data: [],
            smooth: true,
          },
          {
            name: '广州璨宇光学有限公司',
            type: 'line',
            // stack: 'Total',
            data:[] ,
            smooth: true,
          },
          {
            name: '佐登妮丝（广州）有限公司',
            type: 'line',
            // stack: 'Total',
            data: [],
            smooth: true,
          }
        ]
      };
      
const chartIntance = UseEchartsResize(myChart,option)
console.log("chartIntancehooks",chartIntance);

// onMounted(()=>{
//   // 在onMounted生命周期 V2 mounted DOM挂载完成
//   // 还会放到nextTick中 
//   // useEchartsResize.leftBottomEchartInstance.value=proxy.$echarts.init(myChart.value);
//       // 第三步
    

      
//       // handlerSetOption(option)



// })


function getInitData(){
  setTimeout(()=>{
    let seriesArr=[[130, 105, 135, 120, 175, 205, 185, 195, 208],
    [225, 222, 180, 234, 205, 180, 170, 220, 231],
    [180, 230, 201, 150, 230, 230, 240, 210, 240],
    [180, 175, 201, 210, 200, 142, 205, 235, 248],
    [235, 250, 238, 252, 260, 245, 235, 235, 230]]

    option.series[0].data=seriesArr[0]
    option.series[1].data=seriesArr[1]
    option.series[2].data=seriesArr[2]
    option.series[3].data=seriesArr[3]
    option.series[4].data=seriesArr[4]
    // handlerSetOption(option)
    console.log("chartIntance",chartIntance);
    
    chartIntance.value.setOption(option)
  },4000)
}

getInitData()


// 地图展示

const echartsMap1 = ref(null);  // 获取DOM节点
onMounted(async ()=>{
  
  let myMapChart = proxy.$echarts.init(echartsMap1.value);
  
  let result = await proxy.$axios.get('https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json');
  let mapdata = result.data
  
  $echarts.registerMap("河南", mapdata);
  
let mapOption = {
	title: {
		text: `河南地图`,
		left: 'center',
		top: '2%',
		textStyle: {
			color: '#fff'
		}
	},
	backgroundColor: '#070d18',
	series: [{
		name: `中国地图`,
		//使用上面注册的地图
		map: '河南',
		//初始化类型写地图
		type: "map",
		roam: true,//鼠标滚轮缩放
		selectedMode: false, // 点击选中区域
		// 区块文字样式
		label: {
			normal: {
				formatter: '{b}',
				show: true,
				textStyle:{
					color:'#fff'
				}
			},
			emphasis: {
				show: true,
				textStyle: {
					color: '#05C3F9'
				}
			}
		}, 
		// 区块样式
		itemStyle: {
			normal: {
				areaColor: '#0C356C',
				borderColor: '#3B5077',
				borderWidth: 1
			},
			emphasis: {
				areaColor: '#0C356C',
				shadowColor: '#1773c3',
				shadowBlur: 20
			}
		},
		select: { // 地图选中区域样式 
		},
		data: [
		],
	}]
}
myMapChart.setOption(mapOption);
myMapChart.on('click', (params) => {
        console.log("点击地图", params)
       
    })

})




  // // 视频流
  // const url='http://localhost:9002/live/123.flv';  // 请输入你真实的Flv视频流
  
  // // 监控视频实例
  // const flvPlayerRef = ref();
  // const videoFlv = ref("")
  // // 初始化
  // onMounted(() => {
  //      // 检查当前浏览器是否支持 FLV
  //         if (flvjs.isSupported()) {
  //           // const videoElement = window.document.getElementById("videoFlv");
  //            // 创建监控实例
  //            const flvPlayer = flvjs.createPlayer(
  //             {
  //               type: "flv",
  //               url: url,
  //               isLive: false, // 是否自动开启直播
  //             },
  //             {
  //               autoCleanupSourceBuffer: true, // 播放器会自动管理和清理缓冲区，减少内存使用。
  //               autoCleanupMaxBackwardDuration: 12, //控制最大回退缓冲时间，避免过多的数据占用内存。
  //               autoCleanupMinBackwardDuration: 8, //确保播放中至少保留一定的缓冲时间，以防播放中断。
  //             }
  //           );
  //           // 将监控实例绑定在播放器中显示视频内容
  //           flvPlayer.attachMediaElement(videoFlv.value);
  //           flvPlayer.load();
  
  //           // flvPlayer.play(); // 播放视频方法
  
  //           // 监听播放状态等事件
  //           flvPlayer.on(flvjs.Events.LOADING_COMPLETE, () => {
  //             console.log("视频加载完成");
  //           });
  
  //           flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
  //             console.error("视频播放错误", errType, errDetail);
  //             destroyFlv()
 
  //           });
  
  //           flvPlayer.on(flvjs.Events.STATISTICS_INFO, (_statistics) => {
  //             // console.log("视频播放统计信息", statistics);
  //           });
            
  //           flvPlayerRef.value = flvPlayer;
  //         }
  
  // });
  
  // // 销毁视频组件  如何有切换视频流重新播放的需求，请在每一次切换时，调用这个方法来清空。
  // const  destroyFlv=()=>{
  //   if (flvPlayerRef.value) {
  //     flvPlayerRef.value.pause(); // 确保在销毁前暂停播放
  //     flvPlayerRef.value.unload(); // 卸载播放器
  //     flvPlayerRef.value.detachMediaElement(); // 移除视频元素的关联
  //     flvPlayerRef.value.destroy(); // 销毁播放器实例
  //     flvPlayerRef.value = null; // 清空引用
  //   }
  // }
  
  // // 组件关闭时执行方法
  // onBeforeUnmount(() => {
  //   destroyFlv()
  // });

// 原文链接：https://blog.csdn.net/youyudehan/article/details/142262441


</script>
<style lang='scss' scoped>
.deviceWorking{
    border: 3px solid pink;
    color: aliceblue;
    font-weight: bold;
    font-size: 50px;
}
</style>